<template>
<div class="containers" v-loading="loading">
    <div class="canvas" ref="canvasRef" />
    <ViewModelerPropertiesPanel v-if="bpmnModeler" :modeler="bpmnModeler" />
    <a v-show="false" ref="downloadLinkRef" href="javascript:"></a>
</div>
</template>
<script setup lang="ts" name="ModelerCanvas">
import BpmnModeler from "bpmn-js/lib/Modeler"
import { watch, markRaw, onMounted, reactive, ref, toRefs } from "vue";
import ViewModelerPropertiesPanel from './ViewModelerPropertiesPanel.vue';
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import request from "/@/utils/request";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const data = reactive({
    bpmnModeler: null,
})

const {bpmnModeler} = toRefs(data);
const bpmnXml = ref<string>("");//模型xml
const loading = ref<boolean>(false);
const saveLoading = ref<boolean>(false);
const props = defineProps<{
  id: string,
  name: string,
}>()

const emits = defineEmits<{
  (e: 'formSubmited'): void
}>()

const canvasRef = ref();
const downloadLinkRef = ref();

const i18n = useI18n();

onMounted(() => {
    data.bpmnModeler = markRaw(new BpmnModeler({
        container: canvasRef.value,
    }))

    // data.bpmnModeler.createDiagram().then(()=>{
    //     data.bpmnModeler.get("canvas").zoom("fit-screem")
    // });
})

watch(()=>props.id, (newV, oldV)=>{
  if(newV){
    loading.value = true;
    request.get(`/workflow/modeler/def/${props.id}`).then((res)=>{
      bpmnXml.value = res.data;
      createNewDiagram();
    }).finally(()=>loading.value = false)
  }
},{
  deep:true,
  immediate:true,
})


const createNewDiagram = ()=>{
  // 将字符串转换成图显示出来
  data.bpmnModeler.importXML(bpmnXml.value)
}

//下载模型
const handleDownloadBpmnXml = ()=>{
  data.bpmnModeler.saveXML({ format: true }).then((datax: string)=>{
    const encodedData = encodeURIComponent(datax.xml);
    downloadLinkRef.value.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
    downloadLinkRef.value.download = props.name?props.name+".bpmn":"diagram.bpmn";
    downloadLinkRef.value.click();
  }).catch(()=>{ElMessage.error(i18n.t('message.failure'))})
}

const handleSaveBpmnXml = ()=>{
  if(loading.value){
    return
  }
  data.bpmnModeler.saveXML({ format: true }).then((datax: string)=>{
    saveLoading.value = true;
    request.post('/workflow/modeler/deploy/xml',{
      xml: datax.xml,
      name: props.name,
    }).then(()=>emits('formSubmited'))
    .finally(()=>saveLoading.value = false)
  }).catch(()=>{ElMessage.error(i18n.t('message.failure'))})

}

defineExpose({
  handleDownloadBpmnXml,
  handleSaveBpmnXml,
})

</script>
<style scoped lang="scss">

.containers {
  position: relative;
  background-color: #ffffff;
  width: 100%;
  height: 100%;

  :deep(.el-canvas){
    width: 100%;
    height: 100%;
    .panel {
        position: absolute;
        right: 0;
        top: 50px;
        width: 300px;
    }
    .bjs-powered-by {
        display: none;
    }
  }
  
  .toolbar {
    position: absolute;
    top: 20px;
    right: 350px;
    a {
      text-decoration: none;
      margin: 5px;
      color: #409eff;
    }
  }
}
</style>